<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    @handleOk="buttonMessage" @handleCancle="handleCancle">
    <template v-slot:body>
      <div>
        <a-form name="advanced_search" class="ant-advanced-search-form" :model="formState" ref="columnFrom">
          <template v-for="(section, section_index) in formState" :key="section_index">
            <a-form-item :label="section.label">
              <a-input v-model:value="section.value" placeholder="请输入" v-if="section.param == 'userPhone' ||
                section.param == 'fixPhone' ||
                section.param == 'userEmail'
                " />
              <span v-else>{{
                section.value instanceof Array
                ? section.value.map((item: any) => item.name).join("、")
                : section.value
              }}</span>
            </a-form-item>
          </template>

          <!-- <a-form-item :label="'所属组织'">
            <span>{{ formState.orgName }}</span>
          </a-form-item>
          <a-form-item :label="'虚拟组织'">
            <span>{{ virOrg(111) }}</span>
          </a-form-item>
          <a-form-item :label="'真实姓名'">
            <span>{{ formState.realName }}</span>
          </a-form-item>
          <a-form-item :label="'手机号码'">
            <a-input v-model:value="searchValue" placeholder="请输入" />
          </a-form-item>
          <a-form-item :label="'座机号码'">
            <a-input v-model:value="searchValue" placeholder="请输入" />
          </a-form-item>
          <a-form-item :label="'电子邮箱'">
            <a-input v-model:value="searchValue" placeholder="请输入" />
          </a-form-item> -->
        </a-form>
      </div>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, defineComponent, watch } from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";

//interface
interface Options {
  [propName: string | number]: any;
}
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
});
//data
//模态框数据
const modAlProps = reactive<Options>({
  width: "M",
  title: "个人中心",
});

//模态框button按钮个数和文案修改
const buttons = ref<dataSourceType[]>([
  {
    text: "保存",
    "html-type": "submit",
    keepAlive: true,
  },
]);
const formState = ref([
  {
    param: "userName",
    value: "" as any,
    label: "用户名称",
  },
  {
    param: "orgName",
    value: "" as any,
    label: "所属组织",
  },
  {
    param: "virOrgIds",
    value: "" as any,
    label: "虚拟组织",
  },
  {
    param: "realName",
    value: "" as any,
    label: "真实姓名",
  },
  {
    param: "userPhone",
    value: "" as any,
    label: "手机号码",
  },
  {
    param: "fixPhone",
    value: "" as any,
    label: "座机号码",
  },
  {
    param: "userEmail",
    value: "" as any,
    label: "电子邮箱",
  },
]);
//获取个人中心数组
const fetchUserInfo = async () => {
  let res = await request.fetchUserInfo();
  formState.value.forEach((item: any) => {
    item.value = res[item.param];
  });
  // fetchChannelChannelTree();
};

// 修改个人中心
const buttonMessage = async (msg: dataSourceType) => {
  let params = {
    fixPhone: "",
    userEmail: "",
    userPhone: "",
  };
  formState.value.map((item: any) => {
    if (item.param == "fixPhone") {
      params.fixPhone = item.value;
    }
    if (item.param == "userEmail") {
      params.userEmail = item.value;
    }
    if (item.param == "userPhone") {
      params.userPhone = item.value;
    }
  });
  request
    .fetchPhoneAndEmail(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        updateUserInfo();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
const emits = defineEmits(["handleOk", "handleCancle", "updateUserInfo"]);
const updateUserInfo = () => {
  emits("updateUserInfo");
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
//onmounted
onMounted(async () => {
  fetchUserInfo();
});
</script>

<style lang="scss" scoped>
::v-deep(.atree) {
  margin-left: 80px;
}

.ant-form-item:last-child {
  margin-bottom: 0;
}
.ant-form-item:nth-child(1) {
  height: 22px;
}
.ant-form-item:nth-child(2) {
  height: 22px;
}
.ant-form-item:nth-child(3) {
  height: 22px;
}
.ant-form-item:nth-child(4) {
  height: 22px;
}

.openorclose {
  margin-left: 80px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #1f6ded;

  .iconfont {
    margin-left: 5px;
  }
}
</style>
